﻿<!DOCTYPE HTML PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html>
<head lang="en">
    <title>Web Modbus</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <meta name="format-detection" content="telephone=no">
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <!--<meta http-equiv="Cache-Control" content="no-siteapp" />-->
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <link rel="alternate icon" type="image/png" href="favicon.png">
    <link rel="stylesheet" href="/scripts/amazeui/amazeui.min.css" />
    <link rel="stylesheet" href="../css/main.css" />
    <script src="/scripts/jquery-3.3.1.min.js"></script>
    <script src="/scripts/amazeui/amazeui.min.js"></script>

    <script src="/scripts/jquery.signalR-2.4.1.min.js"></script>
    <style>
        .list {
            width: 1000px !important;
        }

        .am-form {
            width: 100%;
            background: #fff;
        }

        .refresh-port {
            width: 80px !important;
            height: 30px !important;
        }
        #msg, #msgWrite {
            color: red;
            clear: both;
        }
        .am-u-sm-4 {
            padding: 3px;
        }
    </style>
    <script type="text/javascript">
        var wid;// 串口id

        function loadDrivers(cb) {
            dds.iot.com.getDrivers(function (data) {
                if (data) {
                    var options = [];
                    var keys = Object.keys(data)
                    for (var i = 0; i < keys.length; i++) {
                        options.push(`
<option value="${keys[i]}">${data[keys[i]]}</option>
`)
                    }
                    $('#drpComType').html(options.join(''));
                }
                cb()
            })

        }
        function loadPorts(cb) {
            dds.iot.com.getPortNames(function (data) {
                if (data) {
                    var options = [];
                    for (var i = 0; i < data.length; i++) {
                        var index = data[i].replace("COM", "");
                        options.push(`
<option value="${index}">${data[i]}</option>
`)
                    }
                    $('#drpComPort').html(options.join(''));
                }
                if (cb)
                    cb()
            })
        }
        function start() {
            var $txtExtendData = $("#txtExtendData");
            var $drpComType = $('#drpComType');
            var $drpComPort = $('#txtPort');
            var $txtComBaudRate = $('#txtComBaudRate');
            var type = $drpComType.val();
            var port = $drpComPort.val() || "1";
            var extendData = $txtExtendData.val();
            var baudRate = $txtComBaudRate.val();
            console.log('type', type)
            // 启动串口
            dds.iot.com.open({
                type: type,//测试型号
                port: port,
                baudRate: baudRate,
                extendData: extendData,
                onReceive: function (res) {
                    
                },
                onOpen: function (ar) {
                    if (ar.Success) {
                        alert('连接成功！');
                    } else {
                        alert(ar.Message)
                    }
                    wid = ar.Data;
                }
            })
        }
        function closeCom() {
            dds.iot.com.close(wid)
        }
        // 读线圈
        function readCoils() {
            var address = $("#txtAddress").val();
            var num = $("#txtNum").val();
            var startAddress = $("#txtStartAddress").val();
            var value = $("#txtValue").val();
            dds.iot.com.exeCommand({ id: wid, name: "ReadCoils", data: { slaveAddress: address, startAddress: startAddress, numberOfPoints: num } }, function (ar) {
                if (ar.Success) {
                    $msg.text('线圈数据：' + ar.Data)
                } else {
                    $msg.text('操作失败：' + ar.Message)
                }
            })
        }
        //读寄存器
        function readHoldingRegisters() {
            var address = $("#txtAddress").val();
            var num = $("#txtNum").val();
            var startAddress = $("#txtStartAddress").val();
            var value = $("#txtValue").val();
            dds.iot.com.exeCommand({ id: wid, name: "ReadHoldingRegisters", data: { slaveAddress: address, startAddress: startAddress, numberOfPoints: num } }, function (ar) {
                if (ar.Success) {
                    $msg.text('读寄存器数据：' + ar.Data)
                } else {
                    $msg.text('操作失败：' + ar.Message)
                }
            })
        }

        //写单个线圈
        function writeSingleCoil() {
            var address = $("#txtWriteAddress").val();
            var startAddress = $("#txtWriteStartAddress").val();
            var value = $("#txtWriteValue").val();
            var $msgWrite = $('#msgWrite');
            dds.iot.com.exeCommand({ id: wid, name: "WriteSingleCoil", data: { slaveAddress: address, startAddress: startAddress, value: value } }, function (ar) {
                if (ar.Success) {
                    $msgWrite.text('写入寄存器成功')
                } else {
                    $msgWrite.text('操作失败：' + ar.Message)
                }
            })
        }
        // 写寄存器
        function writeMultipleRegisters() {
            var address = $("#txtWriteAddress").val();
            var startAddress = $("#txtWriteStartAddress").val();
            var value = $("#txtWriteValue").val();
            var $msgWrite = $('#msgWrite');
            dds.iot.com.exeCommand({ id: wid, name: "WriteMultipleRegisters", data: { slaveAddress: address, startAddress: startAddress, value:value } }, function (ar) {
                if (ar.Success) {
                    $msgWrite.text('线圈数据：' + ar.Data)
                } else {
                    $msgWrite.text('操作失败：' + ar.Message)
                }
            })
        }
        var $msg ;
        // 窗口初始化事件（操作窗口大小、标题）
        $(document).bind('dds.window.init', function (e, win) {
            $msg = $("#msg");
            loadDrivers(function () {
            });
            loadPorts(function () {

            });
        })
    </script>

</head>

<body>
    <div class="fun_bd" style="padding-top:0px;">
        <div class="package-control">
            <div class="list" id="divSpecList">
                <form class="am-form">
                    <fieldset>
                        <div class="am-form-group">
                            <label for="doc-ipt-email-1" class="am-u-sm-4">型号</label>
                            <div class="am-u-sm-8">
                                <select id="drpComType">
                                </select>
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label for="doc-ipt-email-1" class="am-u-sm-4">波特率</label>
                            <div class="am-u-sm-8">
                                <input id="txtComBaudRate" type="text" value="9600" />
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label for="doc-ipt-email-1" class="am-u-sm-4">串口号</label>
                            <div class="am-u-sm-8">
                                <input id="txtPort" type="text" value="2" />
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label for="doc-ipt-email-1" class="am-u-sm-4">扩展数据</label>
                            <div class="am-u-sm-8">
                                <input id="txtExtendData" type="text" value="" />
                            </div>
                        </div>
                        <div style="clear:both"></div>
                        <div class="am-form-group">
                            <button onclick="start()" class="am-btn-primary" type="button">打开</button>
                            <button onclick="closeCom()" class="am-btn-danger" type="button">关闭</button>
                        </div>

                    </fieldset>
                </form>
                <form class="am-form">
                    <h3>数据读取</h3>
                    <fieldset>
                        <div class="am-form-group">
                            <label for="doc-ipt-email-1" class="am-u-sm-4">开始地址</label>
                            <div class="am-u-sm-6">
                                <input id="txtAddress" type="text" value="1" />
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label for="doc-ipt-email-1" class="am-u-sm-4">开始位置</label>
                            <div class="am-u-sm-6">
                                <input id="txtStartAddress" type="text" value="0" />
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label for="doc-ipt-email-1" class="am-u-sm-4">数量</label>
                            <div class="am-u-sm-6">
                                <input id="txtNum" type="text" value="10" />
                            </div>
                        </div>
                        <!--<div class="am-form-group">
        <label for="doc-ipt-email-1" class="am-u-sm-4">值</label>
        <div class="am-u-sm-6">
            <input id="txtValue" type="text" value="1" />
        </div>
    </div>-->
                        <div id="msg"></div>
                        <div class="am-form-group">
                            <button onclick="readCoils()" class="am-btn-primary" type="button">读线圈F1</button>
                            <button onclick="readHoldingRegisters()" class="am-btn-primary" type="button">读寄存器F3</button>
                        </div>

                    </fieldset>
                </form>

                <form class="am-form">
                    <h3>数据写入</h3>
                    <fieldset>
                        <div class="am-form-group">
                            <label for="doc-ipt-email-1" class="am-u-sm-4">开始地址</label>
                            <div class="am-u-sm-6">
                                <input id="txtWriteAddress" type="text" value="1" />
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label for="doc-ipt-email-1" class="am-u-sm-4">开始位置</label>
                            <div class="am-u-sm-6">
                                <input id="txtWriteStartAddress" type="text" value="0" />
                            </div>
                        </div>
                        <!--<div class="am-form-group">
        <label for="doc-ipt-email-1" class="am-u-sm-4">数量</label>
        <div class="am-u-sm-6">
            <input id="txtNum" type="text" value="10" />
        </div>
    </div>
    -->
                        <div class="am-form-group">
                            <label for="doc-ipt-email-1" class="am-u-sm-4">值</label>
                            <div class="am-u-sm-6">
                                <input id="txtWriteValue" type="text" value="1" />
                            </div>
                        </div>
                        <div id="msgWrite" style="clear:both;"></div>
                        <div class="am-form-group">
                            <button onclick="writeSingleCoil()" class="am-btn-primary" type="button">写线圈F5</button>
                            <button onclick="writeMultipleRegisters()" class="am-btn-primary" type="button">写一组寄存器F10</button>
                        </div>

                    </fieldset>
                </form>
            </div>

        </div>
    </div>

</body>

</html>